import React from 'react';
import { connect } from 'dva';
import { Form, Icon, Input, Button, Row, Col } from 'antd';
import { Helmet } from 'react-helmet';
import styles from './Login.less';
const FormItem = Form.Item;

function Login({form,app,dispatch}) {
  const handleSubmit = (e) => {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type:'app/login',
          payload:values
        })
      }
    });
  }
  function hasErrors(fieldsError) {
    return Object.keys(fieldsError).some(field => fieldsError[field]);
  }

  const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = form;
  // Only show error after a field is touched.
  const userNameError = isFieldTouched('userName') && getFieldError('userName');
  const passwordError = isFieldTouched('password') && getFieldError('password');
  return (
    <div>
      <Helmet>
        <title>登录</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      </Helmet>
      <video//播放速度需要另外设置
        src='http://echarts.baidu.com/video/index.mp4'//视频链接
        autoPlay='true'//自动播放
        loop='true'//循环播放
        poster='http://echarts.baidu.com/video/index.jpg'
        className={styles.video}
        >
      </video>
      <div className={styles.login}>
        <div className={styles.title}>
          Executive Report
        </div>
        <Form
          layout="horizontal"
          onSubmit={handleSubmit}
          className={styles.form}
          >

          <Row gutter={30}>
            <Col span={10}>
              <FormItem
                validateStatus={userNameError ? 'error' : ''}
                help={userNameError || ''}
              >
                {getFieldDecorator('userName', {
                  rules: [{ required: true, message: '请输入账号！' }],
                })(
                  <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="账号" />
                )}
              </FormItem>
            </Col>
            <Col span={10}>
              <FormItem
                validateStatus={passwordError ? 'error' : ''}
                help={passwordError || ''}
              >
                {getFieldDecorator('password', {
                  rules: [{ required: true, message: '请输入密码！' }],
                })(
                  <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="密码" />
                )}
              </FormItem>
            </Col>
            <Col span={4}>
              <FormItem>
                <Button
                  type="primary"
                  htmlType="submit"
                  disabled={hasErrors(getFieldsError())}
                >
                  登 录
                </Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
        </div>
    </div>
  );
}


export default connect(({app})=>({app}))(Form.create()(Login));
